<template>
  <ul class="news-info-list">
    <template v-for="(item, index) in infoList" :key="index">
      <li class="new-info-item flex" :class="{ 'new-info-item-top': item.is_top }">
        <router-link class="flex justify-between new-info-item-link" :to="'/news/article?id=' + item.id">
          <section class="new-info-item-content" v-if="item.images">
            <!-- 有一张图片 -->
            <section class="news-info-item-img flex justify-between" v-if="item.images.length == 1">
              <section class="news-info-item-img-text">
                <p class="news-title font-md font-normal text-ellipsis">
                  <span>{{ item.title }}</span>
                </p>
                <p class="news-person font-sm text-more-ellipsis">
                  {{ item.introduce }}
                </p>
                <p class="news-other font-m">
                  <span class="news-other-istop" v-show="item.isTop">置顶</span>
                  <span class="news-other-classify">{{ item.classify_title }}</span>
                </p>
              </section>
              <section class="news-info-item-img-images">
                <img :src="item.images[0]" alt="" />
              </section>
            </section>
            <!-- 没有图片 -->
            <section class="news-info-item-noimg" v-else-if="item.images.length == 0">
              <p class="news-title font-md font-normal text-ellipsis">
                <span>{{ item.title }}</span>
              </p>
              <p class="news-person font-sm text-more-ellipsis">
                {{ item.introduce }}
              </p>
              <p class="news-other font-m">
                <span class="news-other-istop" v-show="item.isTop">置顶</span>
                <span class="news-other-classify">{{ item.classify_title }}</span>
              </p>
            </section>
            <!-- 有多张图片 -->
            <section class="new-info-item-moreimg" v-else>
              <p class="news-title font-md font-normal text-ellipsis">
                <span>{{ item.title }}</span>
              </p>
              <ol class="news-info-item-imglist flex">
                <li class="news-info-item-imglist-item news-info-item-img-images"
                  v-for="(imgItem, imgIndex) in item.images" :key="imgIndex">
                  <img :src="imgItem" alt="" />
                </li>
              </ol>
              <p class="news-other font-m">
                <span class="news-other-istop" v-show="item.isTop">置顶</span>
                <span class="news-other-classify">{{ item.classify_title }}</span>
              </p>
            </section>
          </section>
          <section class="new-info-item-time">
            <section class="date-wrap text-main">
              <!-- <span class="year font-sm">2022</span> -->
              <span class="md font-m">{{ item.create_at }}</span>
            </section>
            <section class="read">
              <section class="arrow arrow-1">
                <ArrowVue color="#9195A3"></ArrowVue>
              </section>
              <section class="arrow arrow-2">
                <ArrowVue color="#9195A3"></ArrowVue>
              </section>
            </section>
          </section>
        </router-link>
      </li>
    </template>
  </ul>
</template>

<script setup lang="ts">
import ArrowVue from "@/components/icon/Arrow.vue";

import { onMounted, watch } from "vue";

const props = defineProps({
  infoList: {
    type: Array as any,
    default: [] as any,
  },
});
</script>

<style scoped>
/* 主题内容 */
.new-info-item {
  padding: 0px;
  margin-top: 20px;
  transition: all .36s ease;
}

.new-info-item::before {
  margin-top: 25px;
  content: "";
  display: inline-block;
  margin-right: 13px;
  width: 5px;
  height: 5px;
  background: #9195a3;
  border-radius: 50%;
}

.new-info-item-top::before {
  background: #ff0000;
}

.new-info-item-link {
  width: 862px;
}

.new-info-item-content {
  padding-top: 16px;
  width: 760px;
}

/* 有一张图片 */
.news-info-item-img-text {
  width: 550px;
}

.news-info-item-img-images {
  width: 165px;
  height: 103px;
  overflow: hidden;
  border-radius: 12px;
}

.news-info-item-img-images img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 有多张图片 */
.news-info-item-imglist {
  margin-bottom: 20px;
}

.news-info-item-imglist-item {
  margin-right: 33px;
}

.news-info-item-imglist-item:last-child {
  margin-right: 0;
}

/* 列表项主体部分 */
.news-title {
  padding-bottom: 12px;
  color: #000000;
}

.news-person {
  height: 48px;
  line-height: 24px;
  color: #626675;
}

.news-other {
  height: 40px;
  line-height: 40px;
}

.news-other-istop {
  margin-right: 14px;
  color: #ff0000;
}

.news-other-classify {
  color: #9195a3;
}

.new-info-item-time {
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.date-wrap {
  margin-bottom: 10px;
  line-height: 30px;
}

.year {
  display: none;
}

.read {
  overflow: hidden;
  position: relative;
  width: 40px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  color: #9195a3;
  border-left: 1px solid #9195a3;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.36s ease;
}

.arrow-1 {
  left: 50%;
  color: #9195a3;
}

.arrow-2 {
  left: -50%;
  color: #9195a3;
}

/* hover时的样式 */
.new-info-item:hover {
  width: 926px;
  padding: 0px 23px;
  background: #ffffff;
  box-shadow: 0px 12px 12px 1px rgba(98, 102, 117, 0.15);
}

.new-info-item:hover .news-title span {
  background-image: linear-gradient(to right, #252086 0%, #e60012 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.new-info-item:hover .arrow-1 {
  left: 150%;
  color: #9195a3;
}

.new-info-item:hover .arrow-2 {
  left: 50%;
  color: #9195a3;
}
</style>
